<!DOCTYPE html>
<body>
<script src="../../resources/js-test.js"></script>
<style>
input {
    border: none;
    padding: 0;
    margin: 0;
}
</style>
<input id="input1">
<script>
function handleKeydown(event) {
    event.target.style.width = '0px';
}

function handleBlur(event) {
    testFailed('Event: blur');
    event.target.style.width = '';
}

window.onload = function() {
    debug('Check if a control won\'t loose focus when it becomes 0-size.');
    input1.focus();
    input1.addEventListener('keydown', handleKeydown, false);
    input1.addEventListener('blur', handleBlur, false);
    eventSender.keyDown('0');
    event.target.removeEventListener('keydown', handleKeydown);
    setTimeout(step2, 1);
};

function step2() {
    // We need to check activeElement twice because
    // FrameSelection::setFocusedNodeIfNeeded can change focus.
    shouldBe('document.activeElement', 'input1');
    eventSender.keyDown('1');
    shouldBeEqualToString('input1.value', '01');
    shouldBe('document.activeElement', 'input1');

    debug('');
    debug('Check if 0-size control can get focus.');
    input1.removeEventListener('blur', handleBlur);
    input1.blur();
    shouldBe('document.activeElement', 'document.body', true);
    input1.style.height = '0px';
    shouldBe('input1.offsetHeight', '0', true);
    input1.focus();
    shouldBe('document.activeElement', 'input1');

    finishJSTest();
}

jsTestIsAsync = true;
</script>
</body>
